<template>
    <div class="shirong">
        <ModalTitle title="市容指数"></ModalTitle>
        <div class="shirong-box">
            <div class="shirong-box-list" v-for="(item, index) in listData" :key="index">
                <span>{{item.name}}</span>
                <div>
                    <p :style="{ width: item.index + '%'} "></p>
                </div>
                <span>{{item.index}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue';
import {ZongHeZhiFaYunXDB} from '@/api/zhangzi/index'
export default {
    components: {
        ModalTitle
    },
    data() {
        return {
            listData:[]
        }
    },
    mounted(){
        this.AppearanceIndex()
    },
    methods:{
        // 市容指数
        AppearanceIndex() {
            ZongHeZhiFaYunXDB.cityRoadIndexAPI().then(res => {
                console.log(res,'市容指数');
                if(res.code == 200) {
                    this.listData = res.data
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.shirong {
    width: 100%;
    height: 31.5rem;

    .shirong-box {
        width: 100%;
        height: calc(100% - 5.8rem);
        margin-top: 2rem;
        overflow: auto;

        .shirong-box-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2rem;

            &:last-child {
                margin-bottom: 0;
            }

            span {
                display: inline-block;
                font-size: 1.6rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #C0D3D6;

                &:nth-child(1) {
                    color: #C9D9DB;
                    width:  10rem;
                    overflow: hidden;
                    text-align: center;
                }

                &:nth-child(3) {
                    color: #25E3FF;
                }
            }

            div {
                flex: 1;
                height: 0.5rem;
                background: rgba(0, 0, 0, 0.2);
                margin: 0 1rem;

                p {
                    width: 50%;
                    height: 0.5rem;
                    background: #00D6FB;
                }
            }
        }
    }
}
</style>